<script>
    document.cookie="last=pages/interfazgraficaVentanas.php";
    draggable();
</script>

<p class="xl">Interfaz Gráfica - Ventanas</p>
<img src="img/InterfazGrafica/WinArrastrarVentana.jpg" title="Ventana"></img>
<p>Para abrir una ventana solo debe hacer doble clic con el botón izquierdo sobre cualquier icono del escritorio o de la barra de tareas.</p>

<p class="separado"><b>Botones del Panel Superior Derecho</b>
<ol>
	<li><p><b>Botón para Minimizar:</b> Es el primer botón del panel superior derecho de la ventana y se simboliza con el caracter guión bajo (_)</p>
	    <img src="img/InterfazGrafica/BotonMinimizar.jpg" title="Botón Minimizar"></img>
	    <p>Si se hace clic sobre el mismo la ventana se minimiza quedando accesible desde el botón correspondiente en la barra de tareas.</li>
    	<p><img src="img/InterfazGrafica/VentanaMinimizada.jpg" title="Ventana Minimizada"></img></p> 
	<li><p><b>Botón para Maximizar/Restaurar:</b> Es el segundo botón del panel superior derecho de la ventana y se simboliza con un cuadrado.<p>
       <img src="img/InterfazGrafica/BotonMaximizar.jpg" title="Botón Maximizar"></img>
       </p>Si se hace clic sobre el mismo la ventana se maximiza ocupando toda la pantalla; un nuevo clic restaurará la ventana al tamaño anterior.</li></p>
    	<img src="img/InterfazGrafica/VentanaMaximizada.jpg" title="Ventana Maximizada"></img>
	<li><p><b>Botón para Cerrar:</b> Es el tercer botón del panel superior derecho de la ventana y se simboliza con una cruz (X).</p>
	    <img src="img/InterfazGrafica/BotonCerrar.jpg" title="Botón Cerrar"></img></p>Si se hace clic sobre el mismo la ventana se cierra desapareciendo de la pantalla.</li>
    	<img src="img/InterfazGrafica/ventanacerrar1.jpg" title="Ventana antes de cerrar"></img><img src="img/InterfazGrafica/ventanacerrar2.jpg" title="Ventana cerrada"></img>
</ol>

<p class="separado"><b>Modificación del tamaño de la ventana</b></p>
<p>Para modificar el tamaño de la ventana debe posicionar el mouse sobre cualquier borde de la ventana hasta que el puntero se convierta en una flecha de dos puntas, como se muestra en la imagen. Luego debe hacer clic sobre el borde de la ventana y desplazar el mouse hasta alcanzar el tamaño deseado.</li></p>
<table><tr>
<td><img src="img/InterfazGrafica/VentanaFlechaTamanio.jpg" title="Agrandar/Achicar Ventana" ></img></td>
<td><img src="img/InterfazGrafica/DesplazarVentana.jpg" title="Desplazar Ventana"></img></td>
</tr></table>

<p class="separado"><b>Desplazamiento de la ventana</b></p>
<p>Para mover la ventana debe hacer clic con el botón izquierdo del mouse sobre la barra de título de la ventana y desplazar el mouse hasta el lugar deseado.</p>
<img src="img/InterfazGrafica/ArrastrarVentana.jpg" title="Arrastrar Ventana" ></img>

<p class="separado"><b>Alternar entre ventanas</b></p>
<p>Hay dos formas de cambiar el foco de una ventana a otra:</p>
<ul>
    <li>Hacer clic sobre el botón correspondiente en la barra de tareas.</li>
    <li>Presionar las teclas Alt+Tab.</li>
</ul>

<hr />

<p>Vamos a realizar algunas actividades </p>
<!-- abrir, minimizar, maximizar, cerrar, arrastrar, alternar entre ventanas -->
<ol>
	
	<li><p><b>Abrir Ventana</b>: Para abrir una ventana solo debe hacer doble clic con el botón izquierdo sobre el Icono que se muestra debajo.</p></li>
    <img src="img/chrome_logo.png" height="100" title="Google Chrome" ondblclick="AbrirVentana('3000');mostrar('felicitacion1');window.scrollTo(0,ObtenerPosicionXDeUnDiv('felicitacion1'));"></img></p>
	
	<div id="felicitacion1" class="oculto">
		<p class="felicitacion">¡Excelente, ha aprendido a abrir una ventana!</p>
		<li><b>Minimizar Ventana</b>: Para Minimizar una ventana solo debe hacer clic con el botón izquierdo en el botón <input type="submit" value="Minimizar Ventana" onclick="a=MinimizarVentana();" onfocus=" if ((!a.closed) || (a.screenX<0) )  {mostrar('felicitacion2');window.scrollTo(0,ObtenerPosicionXDeUnDiv('felicitacion2'));a=null;}"></p></li>
	<div id="felicitacion2" class="oculto">
		<p class="felicitacion">¡Excelente, ha aprendido a minimizar una ventana!</p>
		<li><b>Maximizar Ventana</b>: Para Maximizar una ventana solo debe hacer clic en el botón <input type="submit" value="Maximizar Ventana" id="cmd1" onclick="MaximizarVentana();" onfocus="if(self.name=='Ventana'){self.name='Nada';mostrar('felicitacion3');window.scrollTo(0,ObtenerPosicionXDeUnDiv('felicitacion3'));}" ></p></li>
	</div>
	<div id="felicitacion3" class="oculto">
		<p class="felicitacion">¡Excelente, ha aprendido a maximizar una ventana!</p>
		<li><b>Cerrar Ventana</b>: Para Cerrar una ventana solo debe hacer clic en el botón <input type="submit" value="Cerrar Ventana" onclick="a=CerrarVentana();" onfocus="if ((a.closed) || (a.screenX==0) )  {mostrar('felicitacion4');window.scrollTo(0,ObtenerPosicionXDeUnDiv('felicitacion4'));a=null;}"> </p></li>
	</div>
	<div id="felicitacion4" class="oculto">
		<p class="felicitacion">¡Excelente, ha aprendido a cerrar una ventana!</p>
		<li><b>Desplazar Ventana</b>: Para Desplazar una ventana solo debe hacer un clic con el botón izquierdo del mouse sobre la barra de título de la ventana y mantenerlo presionado hasta colocar la ventana en la posición deseada.</p></li>
	    <img src="img/InterfazGrafica/WinArrastrarVentana.jpg" id="draggable" class="ui-widget-content" ondrag="mostrar('felicitacion5');window.scrollTo(0,ObtenerPosicionXDeUnDiv('felicitacion5'));"></img>
		<div id="felicitacion5" class="oculto">
			<p class="felicitacion">¡Excelente, ha aprendido a desplazar una ventana!</p>
			<li><b>Alternar Ventanas</b>: Para alternar entre ventanas solo debe hacer  clic en el botón  <input type="submit" value="Alternar Ventanas" onclick="a=AlternarVentanas();" onfocus="if (!a.closed) {a.close();a=null;mostrar('felicitacion6');window.scrollTo(0,ObtenerPosicionXDeUnDiv('felicitacion6'));a=null;}"> </p></li> 
		</div>
		<div id="felicitacion6" class="oculto">
			<p class="felicitacion">¡Excelente, ha aprendido a alternar entre ventanas!</p>
			<p class="siguiente">Haga clic en el siguiente enlace para <a href="#" onclick="load('pages/interfazgraficaEscritorio.php')">seguir aprendiendo</a>.</p>
		</div>
    </div>
</div>
